<template>
    <div>
        <TabBar  />
       <div class="myArea">
        <div class="headMy">
            <div class="pre_headImg">
                <img class="headImg" :src="userHeadImg">
            </div>
            <div class="nickName" v-if="nickNameShow">{{nickName}}</div>
            <div class="nickName" v-if="!nickNameShow" @click="enterLoginArea()">点击登录</div>
        </div>
        <div class="contentArea">
            <div class="lis_contentArea">
                <span class="icon iconfont icon_style color2">&#xe630;</span>
                <div class="text_contentArea">收藏</div>
            </div>
            <div class="lis_contentArea">
                <span class="icon iconfont icon_style color3">&#xe60c;</span>
                <div class="text_contentArea">点赞</div>
            </div>
            <div class="lis_contentArea">
                <span class="icon iconfont icon_style color1" >&#xe601;</span>
                <div class="text_contentArea">缓存</div>
            </div>
        </div>
        <div class="recordArea">
            <div class="title_recordArea">播放记录</div>
            <div class="pre_swipe">
                <div class="swiper-container1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide1" v-for="item in JSON.parse(city)" :id="handJson(item,1)" @click="enterVideoDetails(handJson(item,1))">
                            <img class="recodeImg"  :src="handJson(item,2)">
                            <div class="recodeTitle">{{handJson(item,0)}}</div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>



    </div>
</template>

<script>

    import TabBar from '@/components/home/headNav'
    import Swiper from 'swiper'
    export default {
        name: "myArea",
        components:{
            TabBar
        },
        data(){
            return {
                videoDatas:[],
                nickName:'',
                nickNameShow:false,
                userHeadImg:'http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/user_img%402x.png',
                fid:this.city//js中得到fid
            }
        },
        created(){
        },
        mounted(){
            this.handJson();
            new Swiper('.swiper-container', {
                slidesPerView: "auto",
            })
        },
        computed:{
            city(){
                return this.$store.state.videoRecord
            }

        },
        methods:{
            enterLoginArea(){
                let _self = this;
                _self.$toast("正在开发中");
                /*_self.$router.push({
                    path:'/loginArea',
                    name:'loginArea',
                    params:{ }
                })*/
            },
            handJson(Str,index){//处理拼接字符串
                let StrData = Str.split("#");
                return StrData[index];
            },
            enterVideoDetails(id){
                let _self = this;
                _self.$toast("正在开发中");
            }

        }
    }
</script>

<style >

    import 'swiper/dist/css/swiper.min.css'
    .myArea{
        width:100%;
        height:auto;
        position: relative;
        overflow: hidden;
    }

    .headMy{
        width:100%;
        height:auto;
        padding:3% 0;
        background:#2196f3;
        float:left;
        margin-top:44px;
    }
    .pre_headImg{
        width:100%;
        height:auto;
        float:left;
        text-align: center;
    }
    .headImg {
        width:60px;
        height:60px;
        border-radius:50%;
        background:#fff;
    }
    .nickName{
        width:100%;
        height:24px;
        line-height:24px;
        float:left;
        text-align: center;
        color:#fff;
        font-size:1.15em;
        font-weight:600 ;
    }
    .contentArea{
        width:100%;
        height:80px;
        display: flex;
        padding:3% 3%;
        background:#fff;
    }
    .lis_contentArea{
        flex: 1;
        text-align: center;
    }
    .text_contentArea{
        flex: 1;
    }
    .icon_style{
        font-size:1.5em;
    }
    .color1{
        color:#25b0e4;
    }
    .color2{
        color:#f34b68;
    }
    .color3{
        color:#ffbf2c;
    }
    .recordArea{
        width:100%;
        height:auto;
        float:left;
        margin-top:10px;
        padding:3% 3%;
        background:#fff;
    }
    .title_recordArea{
        width:100%;
        height:30px;
        line-height:30px;
        text-align: left;
        font-weight: 600;
        border-bottom:1px solid #efefef;
    }
    .pre_swipe{
        width:100%;
        height:150px;
        overflow: hidden;
        overflow-x: auto;
    }
    .pre_swipe .swiper-container1 {
        width:180%;
        height:auto;
        float:left;
        margin-top:10px;
    }
    .pre_swipe .swiper-slide1{
        width: auto!important;
        margin-right: 15px!important;
        float:left;
    }
    .recodeImg{
        width:80px;
        height:90px;
        float:left;
    }
    .recodeTitle{
        width:80px;
        height:32px;
        text-align: left;
        padding:0 5px;
        font-size:0.8em;
        display: -webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        margin-left:0px;
        margin-top:90px;
    }

</style>